<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true">
      <el-form-item label="用户名称" style="font-weight: bold">
        <el-input style="width: 130px" v-model="commentator" placeholder="请输入用户名称" clearable />
      </el-form-item>

      <el-form-item label="邮箱" style="font-weight: bold">
        <el-input style="width: 130px" v-model="email" placeholder="请输入邮箱" clearable />
      </el-form-item>

      <el-form-item label="IP属地" style="font-weight: bold">
        <el-input style="width: 130px" v-model="ipSource" placeholder="请输入IP属地" clearable />
      </el-form-item>

      <el-form-item label="回复的用户" style="font-weight: bold">
        <el-input style="width: 130px" v-model="toUser" placeholder="请输入回复的用户" clearable />
      </el-form-item>

      <el-form-item label="博客ID" style="font-weight: bold">
        <el-input style="width: 130px" v-model="blogId" placeholder="请输入博客ID" clearable />
      </el-form-item>

      <el-form-item label="级别" style="font-weight: bold">
        <el-select v-model="level" clearable placeholder="请选择级别">
          <el-option label="父级" value="1"/>
          <el-option label="子级" value="2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="审核状态" style="font-weight: bold">
        <el-select v-model="status" clearable placeholder="请选择审核状态">
          <el-option label="未审核" value="0"/>
          <el-option label="审核通过" value="1"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button :icon="Search"  @click="searchList" type="primary">查找</el-button>
        <el-button :icon="Refresh"  @click="clearSearch" >重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具栏 -->
    <el-row :span="10">
<!--      <el-button :icon="Plus"  @click="handleAdd" type="primary">新增</el-button>-->
      <el-button :icon="Delete"  :disabled="!multipleCommentSelect.length"  @click="multipleAction" type="warning">批量审核</el-button>
      <el-button :icon="Delete"  :disabled="!multipleCommentSelect.length"  @click="multipleDelete" type="danger">批量删除</el-button>
    </el-row>
    <!-- 表格栏 -->
    <div style="margin-top: 8px">
      <el-table
          max-height="500px"
          border
          :data="state.comments"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
<!--        <el-table-column-->
<!--            width="80"-->
<!--            align="center"-->
<!--            label="序号">-->
<!--          <template #default="scope">-->
<!--            <span>{{ scope.$index + 1 }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column align="center" prop="blogId" label="博客ID">-->
<!--          <template #default="scope">-->
<!--            <a :href="'http://linzhongyue.cn/#/articles/' + scope.row.blogId" target="_blank" v-text="scope.row.blogId"></a>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column width="100"
                         align="center"
                         label="用户头像">
          <template #default="scope">
            <el-avatar
                :src="scope.row.websiteUrl"
            />
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" prop="commentator" label="用户名称" />
        <el-table-column width="200"  align="center" prop="content" label="评论内容" />
        <el-table-column width="150"  align="center" prop="ipSource" label="IP属地" />
        <el-table-column width="150" align="center" prop="level" label="评论级别" sortable="level">
          <template #default="scope">
            <el-tag v-if="scope.row.level == 1" type="warning">{{ scope.row.level }}</el-tag>
            <el-tag v-if="scope.row.level == 2" type="primary">{{ scope.row.level }}</el-tag>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" prop="parentId" label="父类ID" />-->
        <el-table-column width="200"  align="center" prop="email" label="用户邮箱" />
        <el-table-column width="200" align="center" prop="commentator" label="回复用户名称" />
        <el-table-column align="center" prop="createTime" label="创建时间" width="200px" />
        <el-table-column width="150"  align="center" prop="ip" label="IP" />
        <el-table-column align="center" label="操作" width="250px" fixed="right">
          <template #default="scope">
            <el-button v-if="scope.row.status == 0" size="small" type="warning" @click="handleAction(scope.$index, scope.row)">
              通过审核
            </el-button>
            <el-button v-if="scope.row.status == 1" size="small" type="success">
              已审核
            </el-button>
            <el-button  size="small" type="primary" @click="openBlog(scope.row.blogId)">
              查看博客
            </el-button>
<!--            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">-->
<!--              编辑-->
<!--            </el-button>-->
            <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                :icon="QuestionFilled"
                icon-color="orange"
                title="您确定要删除吗?"
                @confirm="handleDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页栏 -->
    <div>
      <div class="pagination-block">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {onBeforeMount, onMounted, reactive, ref, toRaw} from "vue";
import {ElMessageBox, ElNotification, ElTable, FormInstance, FormRules} from "element-plus";
import { Search,Refresh,Plus,Delete,QuestionFilled} from '@element-plus/icons-vue'
import request from "../../utils/request.js";
import {auditPass, multipleAuditPass, multipleRemove, remove} from "../../api/comment.js";

// 表单校验
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  name: [
    {required: true, message: '必填字段', trigger: 'blur'},
    {min: 2, max: 8, message: '长度限制 2-8', trigger: 'blur'},
  ],
  sort: [
    {required: true, message: '必填字段', trigger: 'blur'},
  ],
})

const state = reactive({
  comments: [],
  categoryForm: {},
})

// 搜索条件
const commentator = ref('')
const email = ref('')
const blogId = ref('')
const ipSource = ref('')
const toUser = ref('')
const level = ref('')
const status = ref('')


// 批量选中的数据
const multipleCommentSelect = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)

const title = ref('')
const dialogFormVisible = ref(false)

// 重置表单校验
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleDelete = (index: number, row: any) => {
  remove(row).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: res.msg,
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: res.msg,
        type: 'error',
      })
    }
  })
}
const handleAction = (index: number, row: any) => {
  auditPass(row).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: "审核通过",
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '审核失败',
        type: 'error',
      })
    }
  })
}

const multipleAction = () => {
  ElMessageBox.confirm(
      '是否进行批量审核?',
      '审核',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        multipleAuditPass(multipleCommentSelect.value).then((res:any) => {
          if(res.code == '200' || res.code == 200){
            ElNotification({
              title: 'success',
              message: res.msg,
              type: 'success',
            })
            searchList();
          }else {
            ElNotification({
              title: 'error',
              message: res.msg,
              type: 'error',
            })
          }
        })
      })
}

const multipleDelete = () => {
  ElMessageBox.confirm(
      '是否进行批量删除?',
      '删除',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        multipleRemove(multipleCommentSelect.value).then((res:any) => {
          if(res.code == '200' || res.code == 200){
            ElNotification({
              title: 'success',
              message: res.msg,
              type: 'success',
            })
            searchList();
          }else {
            ElNotification({
              title: 'error',
              message: res.msg,
              type: 'error',
            })
          }
        })
      })
}
const searchList = () => {
  request.get("/comment/list",{
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      commentator: commentator.value,
      email: email.value,
      blogId: blogId.value,
      ipSource: ipSource.value,
      toUser: toUser.value,
      level: level.value,
      status: status.value,
    }
  }).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      console.log(res)
      currentPage.value = res.data.current
      pageSize.value = res.data.size
      totalSize.value = res.data.total
      state.comments = res.data.records
    }
  })
}
const clearSearch = (index: number, row: any) => {
  commentator.value = '';
  email.value = '';
  blogId.value = '';
  ipSource.value = '';
  toUser.value = '';
  level.value = '';
  status.value = '';
  searchList();
}

// 跳转到博客页面
const openBlog = (id:any)=>{
  window.open('http://linzhongyue.cn/#/articles/' + id, "_blank");
}
// 选中复选框后
const handleSelectionChange = (val: any) => {
  multipleCommentSelect.value = val
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  searchList();
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  searchList();
}

onBeforeMount(()=>{
  searchList()
})
</script>

<style scoped lang="scss">
.pagination-block{
  margin-top: 10px;
  float: right;
}
</style>
